import React from 'react'
import './index.css'


export default function Footer({todoList, setTodoList}) {
  // 第十五步：计算已完成的个数
const getCheckedNum =()=>{//reduce第一个参数是一个函数，第二个参数为初始值，第一个参数中函数接受的形参第一个为上一次的值(首次执行拿初始值 非首次执行拿return 后面的值)，第二个参数为数组的每一项，第三个参数为下标
  return todoList.reduce((p,c)=>c.done?p+1:p,0)//遍历数组，如果done为true 就加1
}
  return (
    <div className="todo-footer">
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
        </span>
        <button className="btn btn-danger">清除已完成任务</button>
      </div>
  )
}
